﻿
@{
    ViewBag.Title = "thy";
    Layout = "~/Views/Shared/abb.cshtml";
}
<style>
    /*兼容浏览器*/
    body {
        background-image: url('../../img/2109251T94K638-0-lp.jpg');
    }

    * {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100%;
        height: 1000px;
        padding: 40px;
    }

    .content-left {
        width: 19%;
        height: 750px;
        background-color: #1c232f;
        float: left;
    }

    .content-right {
        width: 81%;
        height: 750px;
        background-color: #6495ED;
        float: left;
    }

    .left-title {
        width: 100%;
        height: 50px;
    }

        .left-title > a {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
            /*去掉a下默认下划线*/
            text-decoration: none;
        }

    /*分割线*/
    .seg {
        height: 1px;
        width: 100%;
        background-color: black;
    }

    .nav {
        /*上下5,左右0*/
        margin: 5px 0;
    }

    /*菜单项主标题*/
    .nav-title {
        height: 40px;
        width: 100%;
        color: white;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }

    /*子标题内容区*/
    .nav-content {
        width: 100%;
        height: 100%;
        background-color: #0C1119;
    }

        /*子标题的样式*/
        .nav-content > a {
            display: block;
            width: 100%;
            height: 30px;
            color: #CCCCCC;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
        }

            /*子标题鼠标经过时的改变颜色*/
            .nav-content > a:hover {
                color: #FFFFFF;
                background-color: #12040c;
            }
    /*内容区*/
    .content-right h1 {
        font-size: 50px;
        /*line-height: 600px;*/
        text-align: center;
    }

    .lab {
        padding: 20px;
    }
    /*内容区信息*/
    .content-right {
        background-color: white;
        
    }

    .gaun {
        width: 50px;
        height: 30px;
        margin-top: 10px;
        margin-left: 700px;
        background-color: cornflowerblue;
    }

    .content-right h3 {
        background-color: gainsboro;
        width: 600px;
        font-size: 20px;
        margin-left: 20px;
        height: 25px;
        border-radius: 5px;
    }
    .gg .jk{
        display: table-cell;
        width: 400px;
        height: 100px;
        
        font-size: 1rem;
        
    }
    .gg {
        margin-left: 20px;
    }
    .butt {
        width: 60px;
        height: 30px;
        margin-left: 20px;
        margin-top:30px;
    }
</style>

<div class="content">
    <h3 class="lab">admin</h3>
    <!--左侧导航栏-->
    <div class="content-left">


        <!--水平线-->
        <div class="seg"></div>

        <!--菜单栏导航-->
        <div class="nav">
            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <!--子标题-->
                <div class="nav-content">
                    <a href="~/WBG/index?id=@ViewBag.id">
                        基本信息
                    </a>
                </div>
            </div>                                @*修改资料页*@

            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <!--子标题-->
                <div class="nav-content">
                    <a href="~/WBG/jkl?id=@ViewBag.id">上传头像</a>
                </div>
            </div>

            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <!--子标题-->
                <div class="nav-content">
                    <a href="~/WBG/sbht?id=@ViewBag.id">我的博客</a>
                </div>
            </div>
            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <!--子标题-->
                <div class="nav-content">
                    <a href="#">修改资料</a>
                </div>
            </div>
            <!--每一个菜单栏项-->
            <div class="nav-menu">
                <!--主标题-->
                <!--子标题-->
                <div class="nav-content">
                    <a href="~/WBG/shy?id=@ViewBag.id">修改密码</a>
                </div>
            </div>
        </div>

        <!--水平线-->
        <div class="seg"></div>
    </div>

    <!--右侧内容区-->
    <div class="content-right">
        <a href="~/WBG/guanli?id=@ViewBag.id" class="gaun">管理</a>
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;修改信息</h3>
        <div class="gg">
            <p>昵称</p><input type="text" />
            <br />
            <p>性别</p>
            <select class="form-control form-control-sm mr-3" id="TypeId">
                <option value="1">请选择</option>
                <option value="2">男</option>
                <option value="3">女</option>
                <option value="4">保密</option>
            </select>
            <br />
            <p>自我介绍(不多于150字)</p>
            <input type="search" class="jk" />
            <br />
            <p>自我描述(不多于150字)</p>
            <input type="search" class="jk" />
        </div>
        <button type="submit" class="butt">提交</button>
    </div>
</div>
<script>
    $(function () {
        //隐藏所有子标题
        $(".nav-menu").each(function () {
            $(this).children(".nav-content").hide();
        });

        //给菜单项中的所有主标题绑定事件
        $(".nav-title").each(function () {
            //获取点击当前标签下所有子标签
            var navConEle = $(this).parents(".nav-menu").children(".nav-content");

            //绑定点击事件,判断navConEle的display这个属性是否为none,时none的话时隐藏状态
            $(this).click(function () {
                if (navConEle.css("display") != "none") {
                    //隐藏,传参数自带动画,单位为毫秒
                    navConEle.hide(300);
                } else {
                    //显示,传参数自带动画,单位为毫秒
                    $(".nav-menu").each(function () {
                        $(this).children(".nav-content").hide(300);
                    });
                    navConEle.show(300);
                }
            });
        });

        $(".nav-content>a").each(function () {
            $(this).click(function () {
                $(".content-right").html($(this).html());
            });
        });

    });
</script>



